<template>
    <div class="tab-box" :style="`--w: ${ w }; --h: ${ h }; --margin: ${ margin }; --padding: ${ padding }`">
        <div class="tab" :style="`--fs: ${ fs }; --tc: ${ tc }; --bg: ${ bg }`" v-show="text">{{ text }}</div>
    </div>
</template>

<script setup>
defineProps({
    w: { type: String,  default: '' },         // 宽度
    h: { type: String,  default: '' },         // 高度
    text: { type: String,  default: '' },      // 文字
    fs: { type: String,  default: '1vw' },     // 字体大小
    tc: { type: String,  default: '#222' },    // 字体颜色
    bg: { type: String,  default: '#ccc' },    // 背景颜色
    margin: { type: String,  default: '0' },   // 外边距
    padding: { type: String,  default: '0' },  // 内边距
});
</script>

<style scoped lang="less">
.tab-box {
    width: var(--w);
    height: var(--h);
    padding: var(--margin);

    .tab {
        padding: var(--padding);
        color: var(--tc);
        font-size: var(--fs);
        font-weight: 500;
        text-align: center;
        line-height: var(--h);
        background-color: var(--bg);
        border-radius: var(--h);
    }
}
</style>